<template>
  <div class="t-card">
    <div class="title flex justify-between">
      <p style="color: #21262f">
        <span v-if="item.isBuy" style="color: #2EBD85">{{$t('购买')}}</span>
        <span v-else style="color: #e35461">{{$t('出售')}}</span> {{$t('USDT 用 CNY')}}
      </p>
      <p class="close">{{$t('已关闭')}}</p>
    </div>
    <p class="price">
      ￥
      <span>{{ item.price }}</span>
    </p>
    <p class="flex justify-between count">
      <span>{{$t('广告数量')}}</span>
      <span class="num">{{ item.count }} USDT</span>
    </p>
    <p class="flex justify-between count">
      <span>{{$t('单笔限额')}}</span>
      <span class="num">{{ item.minCount }} - {{ item.maxCount }} RMB</span>
    </p>
    <div class="yin flex items-center">
      <div class="shu"></div>
      <span>{{$t('银行卡')}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
}
</script>

<style lang="scss" scoped>
.t-card {
  background: #fff;
  padding: 28px;
  margin: 32px 32px 0 32px;
  border-radius: 10px;
  font-size: 32px;
  color: #868d9a;
  .title {
    margin-bottom: 32px;
    .close {
      width: 116px;
      height: 48px;
      background: #f5f5f5;
      border-radius: 6px;
      text-align: center;
      line-height: 48px;
      font-size: 28px;
    }
  }
  .price {
    color: #000;
    font-weight: bold;
    margin-bottom: 30px;
    span {
      font-size: 52px;
    }
  }
  .count {
    font-size: 28px;
    margin-bottom: 28px;
    .num {
      color: #000;
      font-weight: bold;
    }
  }
  .yin {
    border-top: 1px solid #484756;
    padding-top: 38px;
    font-size: 24px;
    .shu {
      width: 7px;
      height: 29px;
      border-radius: 14px;
      background: #e7bb41;
      margin-right: 13px;
    }
  }
}
</style>
